<template>
  <div class="box" ref="box">
    <div class="container">
      <!-- 修改名字 -->
      <div v-if="type == 'nickName'">
        <van-field
          focus
          auto-focus
          ref="nameInput"
          :value="editForm.nickName"
          @input="nameInput"
          clearable
          placeholder="请输入姓名"
          maxlength="10"
        />
        <div class="fixed">
          <div
            :class="[editForm.nickName ? 'primaryBtn' : 'disableBtn']"
            @click="editForm.nickName ? confirm() : ''"
          >
            确认
          </div>
        </div>
      </div>
      <!-- 修改性别 -->
      <div v-if="type == 'sex'">
        <van-cell title="男" @click="editForm.sex = '0'">
          <template #right-icon>
            <van-icon
              v-if="parseInt(editForm.sex) == 0"
              name="success"
              color="#43da2b"
            />
          </template>
        </van-cell>
        <van-cell title="女" @click="editForm.sex = '1'">
          <template #right-icon>
            <van-icon
              v-if="parseInt(editForm.sex) == 1"
              name="success"
              color="#43da2b"
            />
          </template>
        </van-cell>
      </div>

      <div class="fixed">
        <div
          :class="[editForm.sex ? 'primaryBtn' : 'disableBtn']"
          @click="editForm.sex ? confirm() : ''"
        >
          确认
        </div>
      </div>
    </div>
    <!-- 修改密码 -->
    <div v-if="type == 'password'">
      <van-field
        :value="editForm.phoneNumber"
        readonly
        type="tel"
        label="手机号"
      />
      <van-field
        focus
        auto-focus
        @input="verificationCodeInput"
        :value="editForm.verificationCode"
        type="number"
        label="验证码"
      >
        <template slot="button">
          <template slot="button">
            <div
              :style="{ color: counting ? '#999999' : '#F85415' }"
              @click="counting ? '' : sendSms()"
            >
              {{ counting ? `${count}s后重新发送` : "发送验证码" }}
            </div>
          </template>
        </template>
      </van-field>
      <van-field
        @input="newPasswordInput"
        :value="editForm.newPassword"
        label="设置密码"
        placeholder="请输入密码"
      />
      <van-field
        @input="newPasswordagainInput"
        :value="editForm.newPasswordagain"
        label="确认密码"
        placeholder="请输入密码"
      />
      <div class="fixed">
        <div
          :class="[editForm.verificationCode ? 'primaryBtn' : 'disableBtn']"
          @click="editForm.verificationCode ? confirm() : ''"
        >
          确认
        </div>
      </div>
    </div>
    <!-- 修改手机号码 手机号码更改有两步 phoneStep-->
    <div class="changePhonebox" v-if="type == 'phoneNumber'">
      <!-- 第一步 -->
      <div v-if="phoneStep == 1">
        <div class="changePhoneTitle">
          更换手机后,下次登录可使用新手机号登录。
        </div>
        <div class="changePhoneTip">当前手机号:{{ editForm.phoneNumber }}</div>
        <div class="noboder changePhoneInput">
          <van-field
            label-width="16"
            focus
            auto-focus
            @input="newPhoneNumberInput"
            :value="editForm.newPhoneNumber"
            type="tel"
            label="+86"
            placeholder="请输入手机号"
          />
        </div>

        <div class="fixed">
          <div
            :class="[editForm.newPhoneNumber ? 'primaryBtn' : 'disableBtn']"
            @click="editForm.newPhoneNumber ? phoneNext() : ''"
          >
            下一步
          </div>
        </div>
      </div>

      <!-- 第二步 -->
      <div v-if="phoneStep == 2">
        <div class="changePhoneTitle">短信验证码已发送,请填写验证码</div>
        <div class="changePhoneTip">需要验证你的手机号进行下一步操作</div>
        <div class="changePhoneCurNum">
          {{
            editForm.newPhoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "\$1****\$2")
          }}
        </div>
        <div class="noboder changePhoneInput">
          <van-field
            @input="verificationCodeInput"
            :value="editForm.verificationCode"
            type="number"
            placeholder="请输入验证码"
          >
            <template slot="button">
              <div
                :style="{ color: counting ? '#999999' : '#F85415' }"
                @click="counting ? '' : sendSms()"
              >
                {{ counting ? `${count}s后重新发送` : "发送验证码" }}
              </div>
            </template>
          </van-field>
        </div>

        <div class="fixed">
          <div
            :class="[editForm.verificationCode ? 'primaryBtn' : 'disableBtn']"
            @click="editForm.verificationCode ? confirm() : ''"
          >
            确认
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  sendPhoneCode,
  changeBindPhone,
  updatePwd,
} from "@/common/api/mine.js";
export default {
  name: "editMyInformation",
  data() {
    return {
      // 用于修改信息
      editForm: {
        nickName: "",
        sex: "",
        phoneNumber: "",
        newPhoneNumber: "",
        verificationCode: "",
        newPasswordagain: "",
        newPassword: "",
      },
      //修改的类型
      type: "",
      phoneStep: 1,
      //   验证码
      sms: "",
      counting: false,
      count: 60,
      timer: null, // 新增一个计时器变量
    };
  },
  onLoad(query) {
    console.log(query);
    this.type = query.type;
    if (this.type == "password") {
      this.editForm.phoneNumber = query.value.replace(
        /(\d{3})\d{4}(\d{4})/,
        "$1****$2"
      );
    } else {
      this.editForm[this.type] =
        this.type == "phoneNumber"
          ? query.value.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
          : query.value;
    }
  },
  onShow() {
    let that = this;
    switch (this.type) {
      case "nickName":
        uni.setNavigationBarTitle({
          title: "设置姓名",
        });
        console.log(this.refs);
        this.refs.nameInput.focus();
        break;
      case "sex":
        uni.setNavigationBarTitle({
          title: "设置性别",
        });
        break;
      case "phoneNumber":
        uni.setNavigationBarTitle({
          title: "设置手机号",
        });
        // 重置为第一步
        this.phoneStep = 1;
        break;
      case "password":
        uni.setNavigationBarTitle({
          title: "修改密码",
        });
        break;
    }
  },
  beforeDestroy() {
    console.log("在组件销毁前清除计时器");
    // 在组件销毁前清除计时器
    this.clearTimer();
  },
  methods: {
    /* 修改确认 type为类型 */
    async confirm() {
      console.log(this.type);
      if (this.type == "nickName") {
        uni.$emit("returnData", {
          type: "nickName",
          value: this.editForm.nickName,
        });
        uni.navigateBack({
          delta: 1,
        });
      }
      if (this.type == "sex") {
        uni.$emit("returnData", {
          type: "sex",
          value: this.editForm.sex,
        });
        uni.navigateBack({
          delta: 1,
        });
      }
      if (this.type == "phoneNumber") {
        //直接修改手机号
        await changeBindPhone({
          phoneNumber: this.editForm.newPhoneNumber,
          phoneCode: this.editForm.verificationCode,
        });
        uni.$emit("returnData", {
          type: "phoneNumber",
          value: this.editForm.newPhoneNumber,
        });
        uni.navigateBack({
          delta: 1,
        });
      }
      if (this.type == "password") {
        console.log(
          "修改密码",
          this.editForm.newPassword,
          this.editForm.newPasswordagain,
          this.editForm.newPassword == this.editForm.newPasswordagain
        );
        // 先判断密码是否一致
        if (this.editForm.newPassword == this.editForm.newPasswordagain) {
          //直接修改密码
          await updatePwd({
            phoneNumber: this.editForm.phoneNumber,
            phoneCode: this.editForm.verificationCode,
            newPassword: this.editForm.newPassword,
          });
          uni.showToast({
            icon: "success",
            title: "修改密码成功",
          });
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 500);
        } else {
          uni.showToast({
            title: "密码不一致",
            icon: "none",
            duration: 1500,
          });
        }
      }
    },
    // 验证码
    async sendSms() {
      // 在这里编写发送短信验证码的逻辑
      //  如果是更换手机号 则发送验证码的是新手机号 如果是更改密码则是原手机号
      await sendPhoneCode({
        phone:
          this.type == "phoneNumber"
            ? this.editForm.newPhoneNumber
            : this.editForm.phoneNumber,
      });
      // 发送成功后开始倒计时
      this.counting = true;
      this.count = 60; // 重新设置倒计时时间
      this.startCountDown();
    },
    startCountDown() {
      this.timer = setInterval(() => {
        this.count--;
        if (this.count === 0) {
          this.clearTimer();
        }
      }, 1000);
    },
    clearTimer() {
      clearInterval(this.timer);
      this.counting = false;
    },

    //
    phoneNext() {
      if (this.type == "phoneNumber") {
        if (
          !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
            this.editForm.newPhoneNumber
          )
        ) {
          uni.showToast({
            title: "手机号码有误",
            icon: "none",
            duration: 1500,
          });
        } else {
          // 发送验证码
          this.sendSms();
          this.phoneStep = 2;
        }
      }
    },

    nameInput(e) {
      this.editForm.nickName = e.detail;
    },
    newPhoneNumberInput(e) {
      this.editForm.newPhoneNumber = e.detail;
    },
    verificationCodeInput(e) {
      this.editForm.verificationCode = e.detail;
    },
    newPasswordInput(e) {
      this.editForm.newPassword = e.detail;
    },
    newPasswordagainInput(e) {
      this.editForm.newPasswordagain = e.detail;
    },
  },
};
</script>

<style scoped lang="scss">
.changePhonebox {
  padding: 40rpx 52rpx 0 52rpx;
  ::v-deep .van-cell {
    background: #fafafa;
  }
}

.box {
  min-height: 100vh;
  width: 750rpx;
  box-sizing: border-box;
  box-sizing: border-box;
  background: #fafafa;

  .changePhoneTitle {
    font-size: 40rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 56rpx;
  }
  .changePhoneTip {
    margin-top: 12rpx;
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
  }
  .changePhoneCurNum {
    margin-top: 64rpx;
    font-size: 40rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 56rpx;
  }
  .changePhoneInput {
    margin-top: 90rpx;
  }
}
.fixed {
  width: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  padding: 0 32rpx;
  box-sizing: border-box;
  bottom: env(safe-area-inset-bottom);
  left: 0;
}
.primaryBtn {
  @include btn_plain_line(
    linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%),
    #ffffff,
    #ff9a00
  ) {
    width: 100%;
    height: 96rpx;
    box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 74, 88, 0.1);
    border-radius: 48rpx;
  }
}
.disableBtn {
  @include btn_plain(#bbbbbb, #ffffff) {
    width: 100%;
    height: 96rpx;
    box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 74, 88, 0.1);
    border-radius: 48rpx;
  }
}
</style>